<template>
  <div id="login">
    <div class="changePwd" v-show="needChangePwd">
      <div class="inputOut">
        <div class="tit">修改密码</div>
        <el-form label-width="100px" :model="changePwdForm" :rules="changePwdRules" ref="changePwdFormDom">
          <el-form-item label="输入原密码" prop="oldpassword">
            <el-input
              v-model="changePwdForm.oldpassword"
              :show-password="true"
              type="password"
              placeholder="输入原密码"
            >
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="设置新密码" prop="newpassword">
            <el-input
              v-model="changePwdForm.newpassword"
              :show-password="true"
              type="password"
              max="18"
              placeholder="设置新密码"
            >
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
            <div :class="'level level' + pwdLevel">
              <span class="levelspan"></span>
              <span class="levelspan"></span>
              <span class="levelspan"></span>
              <span class="leveltit"></span>
            </div>
          </el-form-item>
          <el-form-item label="确认新密码" prop="oncepassword">
            <el-input
              v-model="changePwdForm.oncepassword"
              :show-password="true"
              type="password"
              max="18"
              placeholder="确认新密码"
            >
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="erroetis">{{ changeerroetis }}</div>
            <el-button
              class="submit-button"
              type="primary"
              :disabled="!changePwdForm.oldpassword && changePwdForm.newpassword && changePwdForm.oncepassword"
              @click="toChange"
            >
              确认修改
            </el-button>
          </el-form-item>
          <div class="rolydes">
            注：请输入6-18位，若当前密码强度为弱，则必须修改密码强度等级为强,数字与大写与小写与特殊字符，任意三种或以上组合为强，两种为中，一种为弱。
          </div>
        </el-form>
      </div>
    </div>
    <div class="login-logo">
      <img src="../../assets/img/logo.png" />
      <span>综合一窗受理平台</span>
    </div>
    <div class="login-con">
      <img src="../../assets/img/title.png" />
      <div class="login-title">欢迎来到 综合一窗受理平台</div>
      <div class="login-item">
        <span><img src="../../assets/img/loginicon1.png" /></span>
        <span><img src="../../assets/img/loginicon2.png" /></span>
        <span><img src="../../assets/img/loginicon3.png" /></span>
      </div>
    </div>
    <div class="login-out">
      <div class="lotit1">WELCOME</div>
      <div class="lotit2">欢迎登录</div>
      <div class="inout">
        <el-form :model="pwdForm" :rules="pwdRules" ref="pwdFormDom">
          <el-form-item prop="username">
            <el-input @blur="getErrorCount" v-model="pwdForm.username" placeholder="请输入用户名">
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="pwdForm.password" :show-password="true" type="password" placeholder="请输入密码">
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="vecode" v-show="isVecode">
            <el-input v-model="pwdForm.vecode" class="vecodeout fl" placeholder="请输入验证码">
              <i slot="prefix" class="el-input__icon el-icon-warning-outline"></i>
            </el-input>
            <div class="vecode fr">
              <img @click="loadVecode(false)" :src="vecodeSrc" />
            </div>
          </el-form-item>
          <el-form-item>
            <div class="system-item clear">
              <el-checkbox v-model="rememberAccount" class="fl">记住账号</el-checkbox>
              <span v-show="isVecode" class="fr" @click="loadVecode(false)">看不清，换一张</span>
            </div>
            <div class="erroetis">{{ erroetis }}</div>
            <el-button
              class="submit-button"
              type="primary"
              :disabled="
                isVecode
                  ? !(pwdForm.username && pwdForm.password && pwdForm.vecode)
                  : !(pwdForm.username && pwdForm.password)
              "
              @click="pwdLogin"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import { pwdLogin, loadVecode, getErrorCount, getTokenStatus, changePassWord } from '@/api/login/loginApi';
  import { getRandomString } from '@/config/config';
  import { mapActions } from 'vuex';
  import { Message } from 'element-ui';
  export default {
    name: 'Login',
    data() {
      let checkoncePwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.changePwdForm.newpassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        randomString: getRandomString(16),
        rememberAccount: false,
        vecodeSrc: '',
        token: '',
        isVecode: false,
        needChangePwd: false,
        erroetis: '',
        pwdForm: {
          username: '',
          password: '',
          vecode: ''
        },
        pwdRules: {
          username: [
            {
              required: true,
              message: '请输入账号',
              trigger: 'blur'
            }
          ],
          password: [
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            }
          ],
          vecode: [
            {
              required: false,
              message: '请输入验证码',
              trigger: 'blur'
            }
          ]
        },
        pwdLevel: '0',
        changeerroetis: '',
        changePwdForm: {
          oldpassword: '',
          newpassword: '',
          oncepassword: ''
        },
        changePwdRules: {
          oldpassword: [
            {
              required: true,
              message: '请输入旧密码',
              trigger: 'blur'
            }
          ],
          newpassword: [
            {
              required: true,
              message: '请输入新密码',
              trigger: 'blur'
            }
          ],
          oncepassword: [
            {
              required: true,
              validator: checkoncePwd,
              trigger: 'blur'
            }
          ]
        }
      };
    },
    mounted() {
      this.loadVecode(true);
      this.getTokenStatus();
    },
    watch: {
      isVecode(val) {
        this.pwdRules.vecode[0].required = val;
      },
      'changePwdForm.newpassword'(val) {
        this.pwdLevel = this.checkStrong(val);
        this.changeerroetis = '';
      }
    },
    computed: {},
    methods: {
      ...mapActions(['commitInitUserData']),
      // 加载图片验证码
      async loadVecode(init) {
        if (!init) this.randomString = getRandomString(16);
        const data = await loadVecode(this.randomString);
        this.vecodeSrc = data.data.result;
      },
      //检查当前的登录状态
      async getTokenStatus() {
        const data = await getTokenStatus();
        if (data.data.code === 200) {
          this.$router.push({ path: '/reception/localAffair' });
        }
      },
      //获取当前用户名的错误次数
      async getErrorCount() {
        const data = await getErrorCount(this.pwdForm.username);
        if (data.data.code === 200) {
          this.isVecode = data.data.result >= 3 ? true : false;
        }
      },
      // 账号密码登录
      pwdLogin() {
        this.$refs.pwdFormDom.validate(async (valid) => {
          if (valid) {
            const data = await pwdLogin({
              captcha: this.pwdForm.vecode, //验证码key值
              checkKey: this.randomString, //验证码内容
              passWord: this.pwdForm.password,
              userName: this.pwdForm.username
            });
            if (data.data.success) {
              if (data.data.result.user.passwordState === 'N') {
                this.changePwdForm.oldpassword = this.pwdForm.password;
                Message.success({
                  message: '登录成功，但您需要修改密码',
                  duration: 1000
                });
                this.needChangePwd = true;
                return;
              }
              this.commitInitUserData(data.data.result.token);
              this.$router.push({ path: '/reception/localAffair' });
            } else {
              this.isVecode = data.data.result.error >= 3 ? true : false;
              this.erroetis = data.data.message;
              this.loadVecode(false);
            }
          }
        });
      },
      //检查是否符合密码强度规则
      checkStrong(sValue) {
        let modes = 0;
        if (sValue.length < 8) return modes;
        if (/\d/.test(sValue)) modes++; //数字
        if (/[a-z]/.test(sValue)) modes++; //小写
        if (/[A-Z]/.test(sValue)) modes++; //大写
        if (/\W/.test(sValue)) modes++; //特殊字符
        return modes;
      },
      //确认修改
      toChange() {
        if (this.pwdLevel < 3) {
          this.changeerroetis = '密码强度等级必须为强！';
          return;
        }
        this.$refs.changePwdFormDom.validate(async (valid) => {
          if (valid) {
            const data = await changePassWord({
              userNum: this.pwdForm.username, //用户名
              oldPassWord: this.changePwdForm.oldpassword,
              passWord: this.changePwdForm.newpassword,
              confirmPassWord: this.changePwdForm.oncepassword
            });
            if (data.data.success) {
              this.needChangePwd = false;
              this.loadVecode(false);
              Message.success({
                message: '密码修改成功，请重新登录',
                duration: 2000
              });
            }
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  #login {
    width: 100%;
    height: 100vh;
    background: url('../../assets/img/loginbg.png') no-repeat center;
    .changePwd {
      position: fixed;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      .inputOut {
        width: 600px;
        height: 390px;
        background-color: #ffffff;
        border-radius: 20px;
        padding: 20px 60px 20px 30px;
        .tit {
          margin-bottom: 20px;
          color: $black;
          padding: 10px 0 20px 0;
          font-size: 20px;
          font-weight: bold;
          border-bottom: 1px solid $bordercolor;
        }
        .submit-button {
          width: 200px;
          height: 40px;
          background: #1e8fff;
          opacity: 1;
          border-radius: 5px;
          margin: 0 auto;
        }
        .rolydes {
          padding-left: 100px;
          color: $gray;
          line-height: 25px;
        }
        .level {
          position: absolute;
          right: 60px;
          top: 0px;
          .levelspan {
            display: inline-block;
            width: 20px;
            height: 6px;
            background: #e3e3e3;
            opacity: 1;
            border-radius: 3px;
            margin-right: 10px;
          }
        }
        .level0 {
          display: none;
        }
        .level1 {
          .levelspan:nth-child(1) {
            background-color: $red;
          }
          .leveltit {
            color: $red;
          }
          .leveltit:before {
            content: '弱';
          }
        }
        .level2 {
          .levelspan:nth-child(1) {
            background-color: $blue;
          }
          .levelspan:nth-child(2) {
            background-color: $blue;
          }
          .leveltit {
            color: $blue;
          }
          .leveltit:before {
            content: '中';
          }
        }
        .level3 {
          .levelspan {
            background-color: $green;
          }
          .leveltit {
            color: $green;
          }
          .leveltit:before {
            content: '强';
          }
        }
      }
    }
    .login-con {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 900px;
      .login-title {
        padding-top: 10px;
        padding-bottom: 40px;
        color: #ffffff;
        font-size: 20px;
      }
      .login-item {
        span {
          display: inline-block;
          width: 128px;
          height: 128px;
          background-color: green;
          border-radius: 20px;
          margin-right: 36px;
        }
      }
    }
    .login-logo {
      img {
        margin-right: 10px;
      }
      height: 40px;
      line-height: 40px;
      padding-left: 30px;
      padding-top: 20px;
      color: #ffffff;
      font-weight: bold;
      font-size: 24px;
    }
    .login-out {
      width: 480px;
      min-height: 520px;
      background-color: #ffffff;
      border-radius: 40px;
      position: fixed;
      right: 250px;
      top: 50%;
      transform: translateY(-50%);
      text-align: center;
      .lotit1 {
        padding-top: 40px;
        color: $blue;
        font-size: 48px;
        font-family: DIN;
        font-weight: bold;
      }
      .lotit2 {
        padding-top: 15px;
        font-size: 24px;
        font-weight: bold;
        color: #222222;
      }
      .inout {
        padding-top: 30px;
        width: 360px;
        margin: 0 auto;
      }
      .submit-button {
        margin-top: 20px;
        width: 360px;
        height: 60px;
        border-radius: 60px;
        background: linear-gradient(90deg, #00b9ff 0%, $blue 100%);
        font-size: 20px;
        font-weight: bold;
      }
      .vecodeout {
        width: 180px;
      }
      .erroetis {
        text-align: center;
        color: $red;
      }
      .vecode {
        width: 170px;
        height: 40px;
        display: inline-block;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .system-item {
        color: #0076fe;
      }
    }
  }
</style>
